<template>
  <div>
    <Row>
      <i-col span="16">
        <!--spu商品基本信息-->
        <div class="spu">
          <h3>商品主信息</h3>
          <Form>
            <FormItem label="商品标题：">{{ spuData.title }}</FormItem>
            <FormItem label="商品分类：">{{ classify }}</FormItem>
            <FormItem label="商品单位：">{{ units }}</FormItem>
            <FormItem label="商品标签：">{{ labels }}</FormItem>
            <FormItem label="商品备注：">{{ spuData.remark }}</FormItem>
            <FormItem label="商品权重：">{{ spuData.sortWeight }}</FormItem>
            <FormItem label="商品图片：">
              <img v-for="(src, index) in spuImages" :key="index" :src="src" alt="图片" width="58" style="margin-right: 10px;">
            </FormItem>
            <FormItem label="是否新品：">{{ spuData.isNew === '1' ? '是' : '否' }}</FormItem>
            <FormItem label="是否推荐：">{{ spuData.isRecommend === '1' ? '是' : '否' }}</FormItem>
            <FormItem label="是否清仓：">{{ spuData.isClear === '1' ? '是' : '否' }}</FormItem>
          </Form>
          <div class="btn">
            <Button @click="goToBack(0)" type="ghost">返回修改基本信息</Button>
          </div>
        </div>

        <!--sku 商品列表-->
        <div class="sku">
          <h3>商品所有sku</h3>
          <ul>
            <li v-for="(item, index) in skuList" :key="index">
              <Avatar :src="skuImages[index]" shape="square" size="large" style="float: left;"></Avatar>
              <div style="float: left;margin-left: 10px;">
                <p>名称：{{ item.goodsSkuName }}</p>
                <p>权重：{{ item.sortWeight }}</p>
              </div>
            </li>
          </ul>
          <div class="btn">
            <Button @click="goToBack(1)" type="ghost">返回修改sku</Button>
          </div>
        </div>
      </i-col>
      <i-col span="8">
        <!--详情展示-->
        <h3>商品详情展示</h3>
        <div class="btn">
          <Button @click="goToBack(2)" type="ghost">返回编辑</Button>
        </div>
        <div id="phone" v-html="richText"></div>
      </i-col>
    </Row>
    <div class="btn">
      <Button @click="goToBack(2)" type="primary">上一步</Button>
      <Button @click="finishAdd(false)" type="primary">完成</Button>
      <Button @click="finishAdd(true)" type="ghost">完成，继续添加下一个</Button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'goods-sure',
  data () {
    return {
      spuData: {},
      spuImages: [],

      skuList: [],
      skuImages: [],
      richText: '',

      // 分类，单位，标签
      classify: '',
      units: '',
      labels: ''
    }
  },
  methods: {
    setAllData (data, value) {
      this.classify = value.classify
      this.units = value.units
      this.labels = value.labels
      this.spuData = data.spuData
      this.spuImages = data.spuImages
      this.skuList = data.skuData
      this.skuImages = data.skuImages
      this.richText = data.richText
    },

    goToBack (step) {
      /*
      * 跳转到指定步骤
      * */
      this.$emit('goToBack', step)
    },
    finishAdd (next) {
      /*
      * 确认信息无误，添加商品
      * */
      this.$emit('submit', next)
    }
  },
  created () {
  }
}
</script>

<style scoped>
  .ivu-form-item{
    margin-bottom: 8px;
  }
  .spu{
    margin-top: 16px;
  }
  .sku ul{
    overflow: hidden;
  }
  .sku li{
    float: left;
    overflow: hidden;
    border: 1px solid #dddee1;
    padding: 4px;
    margin: 8px 8px 8px 0;
  }
  #phone{
    width: 350px;
    height: 600px;
    border: 1px solid #000;
    padding: 10px;
    margin-top: 16px;
    border-radius: 20px;
    overflow: auto;
  }
  .btn{
    padding-top: 16px;
    border-top: 1px solid #dddee1;
    margin-top: 10px;
  }
</style>
